
import {Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';

@Directive({
  selector: '[ngToolsDateAndTime]'
})
export class DateAndTimeDirective implements OnInit, OnDestroy {
  private dataAndTime;
  private type;
  @Input('ngToolsDateAndTime') targetRef: Element;
  constructor(private elemRef: ElementRef, private renderer: Renderer2) {
  }
  @Input() set ngToolsDateAndTime(values: { data?: any}) {
    this.type = values.data;
  }

  ngOnDestroy(): void {
  }
  ngOnInit(): void {
    if (this.type === 'dateAndTime') {
      this.dataAndTime = $(this.elemRef.nativeElement, {
        target: () => this.targetRef
      })['datetimepicker']({
        // 回调方法中添加暴露方法
        onChangeDateTime: (date, input) => {
          const event = document.createEvent('Event');
          event.initEvent('input', true, true);
          this.elemRef.nativeElement.dispatchEvent(event);
        }
      });
    }
    if (this.type === 'date') {
      this.dataAndTime = $(this.elemRef.nativeElement, {
        target: () => this.targetRef
      })['datetimepicker'](
        {
          onSelectDate: (date, input) => {
            const event = document.createEvent('Event');
            event.initEvent('input', true, true);
            this.elemRef.nativeElement.dispatchEvent(event);
          },
          i18n: {
            de: {
              months: [
                'Januar', 'Februar', 'März', 'April',
                'Mai', 'Juni', 'Juli', 'August',
                'September', 'Oktober', 'November', 'Dezember',
              ],
              dayOfWeek: [
                'So.', 'Mo', 'Di', 'Mi',
                'Do', 'Fr', 'Sa.',
              ]
            }
          },
          timepicker: false,
          format: 'Y-m-d'
        });
    }
    }
}

